<template>
  <el-cascader
    v-model="select"
    v-bind="$attrs"
    v-on="$listeners"
    v-loading="loading"
    element-loading-spinner="el-icon-loading"
    :options="customerType"
    :props="props"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  components: {},
  props: {
    value: String,
  },
  model: {
    prop: 'value',
    event: 'select',
  },
  data() {
    return {
      loading: false,
      select: '',
      props: {
        label: 'label',
        value: 'value',
      },
      customerType: [
        {
          label: '个人',
          value: 'person',
          children: [
            {
              label: '家庭农场',
              value: 'org_farm',
            },
            {
              label: '家庭农场（种养殖大户）',
              value: 'org_large_breed',
            },
          ],
        },
        {
          label: '法人',
          value: 'com',
          children: [
            {
              label: '农民专业合作社',
              value: 'org_cooperative',
            },
            {
              label: '农业企业',
              value: 'org_enterprise',
            },
          ],
        },
      ],
      initObject: {
        org_farm: { value: ['person', 'org_farm'], label: '家庭农场' },
        org_large_breed: { value: ['person', 'org_large_breed'], label: '家庭农场（种养殖大户）' },
        org_cooperative: { value: ['com', 'org_cooperative'], label: '农民专业合作社' },
        org_enterprise: { value: ['com', 'org_enterprise'], label: '农业企业' },
      },
    }
  },
  computed: {},
  watch: {
    value(val) {
      if (val !== this.select) {
        this.initSelect(val)
      }
    },
  },
  created() {
    this.initSelect(this.value)
  },
  mounted() {},
  methods: {
    initSelect(val) {
      const data = this.initObject[val] || {}
      this.select = data.value || []
    },
    handleChange(val) {
      const select = Array.isArray(val) && val.length ? val[val.length - 1] : '' || ''
      const data = this.initObject[select] || {}
      this.select = select
      this.$emit('select', select, data.label || '')
    },
  },
}
</script>

<style lang="scss" scoped></style>
